
<template>
    <div class="about-box">
        <!-- <div class="right-box">
             <el-image class="right-img" :src="schoolImg" fit="contain" />
        </div> -->
        <div class="about-cont page-cont-box">
            <div class="school-box">
                <el-image class="school-img" :src="schoolImg" fit="contain" />
            </div>

            <div class="item-cont">
                <div class="item-title-box">
                    <div class="item-img-box">
                        <el-image class="school-img" :src="downloadImg" fit="contain" />
                    </div>
                    <div class="item-title" v-lang="{ lang: controlSto.language, lgid: '-6'}"></div>
                </div>
                <div class="item-box" v-lang="{ lang: controlSto.language, lgid: '-9'}" @click="toPage('herbsearch')">Herb Index</div>
                <div class="item-box" v-lang="{ lang: controlSto.language, lgid: '-10'}" @click="toPage('pressearch')">Prescription Index</div>
                <div class="item-box" v-lang="{ lang: controlSto.language, lgid: '-11'}" @click="toPage('ingrsearch')">Ingredient Index</div>
            </div>

            <div class="item-cont">
                <div class="item-title-box">
                    <div class="item-img-box">
                        <el-image class="school-img" :src="supportImg" fit="contain" />
                    </div>
                    <div class="item-title" v-lang="{ lang: controlSto.language, lgid: '-7'}"></div>
                </div>
                <div class="item-box" v-lang="{ lang: controlSto.language, lgid: '-12'}" @click.stop="toPage('guid')">TCM_Comb Guidance</div>
                <div class="item-box" v-lang="{ lang: controlSto.language, lgid: '-13'}" @click.stop="toPage('contact')">Contact Us</div>
            </div>

            <div class="item-cont">
                <div class="item-title-box">
                    <div class="item-img-box">
                        <el-image class="school-img" :src="aboutImg" fit="contain" />
                    </div>
                    <div class="item-title" v-lang="{ lang: controlSto.language, lgid: '-8'}"></div>
                </div>
                <div class="item-box" v-lang="{ lang: controlSto.language, lgid: '-4'}"
                    @click.stop="toSchool(1)"></div>
                <div class="item-box" v-lang="{ lang: controlSto.language, lgid: '-5'}"
                    @click.stop="toSchool(2)"></div>
            </div>
        </div>
    </div>
</template>

<script setup>
    import { ref } from 'vue'
	import { useRouter } from 'vue-router'
    import { controlStore } from '@/stores/control'

    import schoolImg from '@/assets/img/school.png'
    import downloadImg from '@/assets/img/download.png'
    import supportImg from '@/assets/img/support.png'
    import aboutImg from '@/assets/img/about.png'
    
    const controlSto = controlStore();
	const router = useRouter();

    const toPage = (rname) => {
        if(router.currentRoute.value.name != rname) {
            router.push({ name: rname, query: { t: 1 }});
        }
    };

    // 跳转学校
    const toSchool = (t) => { // 1: 中国药科大学   2： 南京中医药大学
        if(t == 1) {
            window.open('https://www.cpu.edu.cn/', '_blank');
        } else if(t == 2) {
            window.open('https://www.njucm.edu.cn/', '_blank');
        }
    };

</script>


<style lang="scss" scoped>
    .about-box {
        display: flex;
        height: 150px;
        justify-content: center;
        align-items: center;
        .about-cont {
            display: flex;
            // width: 1400px;
            justify-content: space-around;    
            align-items: flex-start;
            .school-box {
                width: 34%;
                .school-img {
                    width: 100%;
                    // width: 480px;
                }
            }
            .item-cont {
                .item-title-box {
                    display: flex;
                    .item-img-box {
                        position: relative;
                        top: 2px;
                        width: 20px;
                    }
                    .item-title {
                        margin-left: 4px;
                        font-weight: 600;
                        color: #333;
                    }
                }
                .item-box {
                    padding-bottom: 5px;
                    padding-left: 26px;
                    color: #C7802D;
                    cursor: pointer;
                    &:hover {
                        color: #967846;
                        // font-weight: bolder;
                    }
                }
            }
        }
    }
</style>
